<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { onMounted, reactive ,ref } from 'vue'


const borrowing1 = ref<any[]>([])
//按照读者编号查找
const form1 = reactive({
  UserID: '',
})

const onSubmit1 = async () => {
  if (!form1.UserID) {
    ElMessage.warning('请输入要查询的读者编号');
    return;
  }
  try {
    const response = await fetch(`http://localhost:8080/borrowing/search/userId/${form1.UserID}`, {
      credentials: "include",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      }
    })
    if (response.ok) {
      const data = await response.json()
      borrowing1.value = data 
      form1.UserID=''
    } else {
      ElMessage.error('未找到相关读者借阅记录')
      borrowing1.value = [] 
    }
  } catch (error) {
    console.error('Error searching borrowing by UserID:', error)
    ElMessage.error('查询读者借阅记录失败')
  }
}

const borrowing2 = ref<any[]>([])
//按照图书编号查找
const form2 = reactive({
  BookID: '',
})

const onSubmit2 = async () => {
  if (!form2.BookID) {
    ElMessage.warning('请输入要查询的图书编号');
    return;
  }
  try {
    const response = await fetch(`http://localhost:8080/borrowing/search/bookId/${form2.BookID}`, {
      credentials: "include",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      }
    })
    if (response.ok) {
      const data = await response.json()
      borrowing2.value = data 
      form2.BookID=''
    } else {
      ElMessage.error('未找到相关图书借阅借阅')
      borrowing2.value = [] 
    }
  } catch (error) {
    console.error('Error searching borrowing by BookID:', error)
    ElMessage.error('查询图书借阅记录失败')
  }
}

//按照借阅日期区间查找
const value1 = ref('')
const value2 = ref('')
const borrowing3 = ref<any[]>([])
const onSubmit3 = async () => {
   
  if (!value1.value && !value1.value.length ) {
    ElMessage.warning('请选择日期范围');
    return;
  }

  console.log(value1.value)
  console.log(value2.value)

  const startDate = value1.value
  const endDate = value2.value

  if (!startDate && !endDate) {
    ElMessage.warning('请选择有效的开始和结束日期');
    return;
  }

  try {
    const response = await fetch(`http://localhost:8080/borrowing/date?startDate=${startDate}&endDate=${endDate}`, {
      credentials: "include",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      }
    });
    console.log(`Fetching from: http://localhost:8080/borrowing/date?startDate=${startDate}&endDate=${endDate}`);
    if (response.ok) {
      const data = await response.json();
      borrowing3.value = data; // 更新所有借阅记录
    } else {
      ElMessage.error('未找到该日期范围内的借阅记录');
      borrowing3.value = [];
    }
  } catch (error) {
    console.error('Error searching borrowings by date range:', error);
    ElMessage.error('查询借阅记录失败');
  }
};
// 数据变量
const Borrowings = ref<any[]>([]) // 用于存储从后端获取的借阅记录数据

// 获取书籍数据
const fetchBorrowings = async () => {
  try {
    const response = await fetch('http://localhost:8080/borrowing/list',{
      credentials:"include",
      headers:{
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      }
    }) // 向后端发送请求
    if (!response.ok) {
      throw new Error('Network response was not ok')
    }
    const data = await response.json()
    Borrowings.value = data // 将返回的书籍数据赋值给 Borrowings
  } catch (error) {
    console.error('Error fetching borrowings data:', error)
    Borrowings.value = [] // 请求失败时，清空 Borrowings 数据
  }
}

onMounted(() => {
  fetchBorrowings() // 组件挂载时调用 fetchBooks 获取数据
})

// 数据变量
const Myborrowing = ref<any[]>([]) // 用于存储从后端获取的借阅记录数据

// 获取书籍数据
const fetchMyBorrowing = async () => {
  try {
    const response = await fetch('http://localhost:8080/myBorrowings',{
      credentials:"include",
      headers:{
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      }
    }) // 向后端发送请求
    if (!response.ok) {
      throw new Error('Network response was not ok')
    }
    const data = await response.json()
    Myborrowing.value = data // 将返回的书籍数据赋值给 Borrowings
  } catch (error) {
    console.error('Error fetching borrowings data:', error)
    Myborrowing.value = [] // 请求失败时，清空 Borrowings 数据
  }
}

onMounted(() => {
  fetchMyBorrowing() // 组件挂载时调用 fetchBooks 获取数据
})

</script>

<template>
    <el-tabs type="border-card">
      <el-tab-pane label="查询所有借阅信息">
        <el-table
        :data="Borrowings"
        style="width: 100%"
        >
            <el-table-column prop="id" label="ID" width="90" />
            <el-table-column prop="userid" label="UserID" width="90" />
            <el-table-column prop="bookid" label="BookID" width="90" />
            <el-table-column prop="borrowdate" label="BorrowDate" width="380" />
            <el-table-column prop="returndate" label="ReturnDate"  />
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="按照读者编号查找">
        <el-form :model="form1" label-width="auto" style="max-width: 600px">
            <el-form-item label="读者编号" >
                <el-input v-model="form1.UserID" placeholder="请输入读者编号"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit1">查找</el-button>
            </el-form-item>
         </el-form>
         <el-divider border-style="dashed" />
         <el-table
        :data="borrowing1"
        style="width: 100%"
        >
            <el-table-column prop="id" label="ID" width="90" />
            <el-table-column prop="userid" label="UserID" width="90" />
            <el-table-column prop="bookid" label="BookID" width="90" />
            <el-table-column prop="borrowdate" label="BorrowDate" width="380" />
            <el-table-column prop="returndate" label="ReturnDate"  />
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="按照图书编号查询">
        <el-form :model="form2" label-width="auto" style="max-width: 600px">
            <el-form-item label="图书编号" >
                <el-input v-model="form2.BookID" placeholder="请输入图书编号"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit2">查找</el-button>
            </el-form-item>
         </el-form>
         <el-divider border-style="dashed" />
         <el-table
        :data="borrowing2"
        style="width: 100%"
        >
            <el-table-column prop="id" label="ID" width="90" />
            <el-table-column prop="userid" label="UserID" width="90" />
            <el-table-column prop="bookid" label="BookID" width="90" />
            <el-table-column prop="borrowdate" label="BorrowDate" width="380" />
            <el-table-column prop="returndate" label="ReturnDate"  />
        </el-table>
      </el-tab-pane>
      
      <el-tab-pane label="按照日期范围查询">
        <div class="demo-date-picker">
            <div class="block">
              <span class="demonstration">借阅时间</span>
              <el-date-picker
                v-model="value1"
                type="date"
                placeholder="Pick a Date"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
              />
            </div>
            <div class="block">
              <span class="demonstration">归还时间</span>
              <el-date-picker
                v-model="value2"
                type="date"
                placeholder="Pick a Date"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
              />
            </div>
        </div>
        <el-form-item>
            <el-button type="primary" @click="onSubmit3" >查找</el-button>
        </el-form-item>
        <el-divider border-style="dashed" />
        <el-table
        :data="borrowing3"
        style="width: 100%"
        >
            <el-table-column prop="id" label="ID" width="90" />
            <el-table-column prop="userid" label="UserID" width="90" />
            <el-table-column prop="bookid" label="BookID" width="90" />
            <el-table-column prop="borrowdate" label="BorrowDate" width="380" />
            <el-table-column prop="returndate" label="ReturnDate"  />
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="查询自己借阅信息">
        <el-table
        :data="Myborrowing"
        style="width: 100%"
        >
            <el-table-column prop="id" label="ID" width="90" />
            <el-table-column prop="userid" label="UserID" width="90" />
            <el-table-column prop="bookid" label="BookID" width="90" />
            <el-table-column prop="borrowdate" label="BorrowDate" width="380" />
            <el-table-column prop="returndate" label="ReturnDate"  />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </template>

<style scoped>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>